<template>
  <el-drawer v-model="data.drawer" title="" direction="rtl" size="50%" v-if="json">
    <template #header>
      <div class="el-drawer__title flex-start-center list-r-8">
        <h3>数据信息</h3>
        <ElSelectBox :data="data" dataName="depth" :options="8" optionsName="层级" :width="200" title="层级"
          @changeBtn="changeBtn">
        </ElSelectBox>
      </div>
    </template>
    <el-scrollbar>
      <div class="p-12 list-b-12">
        <json-viewer :value="json" sort :expanded="true" :expand-depth="data.depth" :copyable="{
          copyText: '复制',
          copiedText: '复制成功',
        }" v-if="data.show"></json-viewer>
      </div>
    </el-scrollbar>
  </el-drawer>
</template>
<script setup lang="ts">
//按钮监听-组合按钮
import { useCombinationKeys } from '@/utils/useKeydown';
useCombinationKeys({ keys: ['ArrowRight', 'ArrowLeft'], modifiers: ['ctrl'] }, (event: any) => {
  event.preventDefault();
  switch (event.key) {
    case 'ArrowLeft':
      data.drawer = true
      break;
    case 'ArrowRight':
      data.drawer = false
      break;
    case 'Enter':

      break;
    default:
      break;
  }
});
const { proxy } = getCurrentInstance() as any;
const props = withDefaults(
  defineProps<{
    json?: any;
  }>(),
  {
  },
);
const data = reactive({
  drawer: false,
  show: true,
  depth: 1,

});
const changeBtn = () => {
  data.show = false
  nextTick(() => {
    data.show = true
  })
}
const emit = defineEmits<{
  //fn为父组件引入子组件是定义的子组件事件属性，可随意定义
  (event: 'backBtn'): void;
}>();
// 当组件挂载时添加事件监听器
onMounted(() => {

});

</script>
<style scoped lang="scss"></style>
